<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>vue的组件间通信方法总结 | 树洞</title><meta name="author" content="计算机学士&amp;化工硕士"><meta name="copyright" content="计算机学士&amp;化工硕士"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Meting support is disabled, cannot resolve the meting tags properly.">
<meta property="og:type" content="article">
<meta property="og:title" content="vue的组件间通信方法总结">
<meta property="og:url" content="https://baozi0625.gitee.io/tree-cave/2023/07/20/vue%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/index.html">
<meta property="og:site_name" content="树洞">
<meta property="og:description" content="Meting support is disabled, cannot resolve the meting tags properly.">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg">
<meta property="article:published_time" content="2023-07-19T16:00:00.000Z">
<meta property="article:modified_time" content="2023-08-04T14:43:53.954Z">
<meta property="article:author" content="计算机学士&amp;化工硕士">
<meta property="article:tag" content="vue-组件间通信">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg"><link rel="shortcut icon" href="/tree-cave/img/favicon.png"><link rel="canonical" href="https://baozi0625.gitee.io/tree-cave/2023/07/20/vue%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/tree-cave/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/tree-cave/',
  algolia: undefined,
  localSearch: {"path":"/tree-cave/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '天',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: 计算机学士&化工硕士","link":"链接: ","source":"来源: 树洞","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'vue的组件间通信方法总结',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-08-04 22:43:53'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>(()=>{
  const $loadingBox = document.getElementById('loading-box')
  const $body = document.body
  const preloader = {
    endLoading: () => {
      $body.style.overflow = ''
      $loadingBox.classList.add('loaded')
    },
    initLoading: () => {
      $body.style.overflow = 'hidden'
      $loadingBox.classList.remove('loaded')
    }
  }

  preloader.initLoading()
  window.addEventListener('load',() => { preloader.endLoading() })

  if (false) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
})()</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://s2.loli.net/2023/06/20/PkXRYIvxGBrtHZA.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/tree-cave/archives/"><div class="headline">文章</div><div class="length-num">14</div></a><a href="/tree-cave/tags/"><div class="headline">标签</div><div class="length-num">11</div></a><a href="/tree-cave/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/tree-cave/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/tree-cave/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tree-cave/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/tree-cave/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 休闲</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/tree-cave/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/tree-cave/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/tree-cave/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg')"><nav id="nav"><span id="blog-info"><a href="/tree-cave/" title="树洞"><span class="site-name">树洞</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/tree-cave/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/tree-cave/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tree-cave/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/tree-cave/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 休闲</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/tree-cave/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/tree-cave/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/tree-cave/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">vue的组件间通信方法总结</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-07-19T16:00:00.000Z" title="发表于 2023-07-20 00:00:00">2023-07-20</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-08-04T14:43:53.954Z" title="更新于 2023-08-04 22:43:53">2023-08-04</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/tree-cave/categories/Vue/">Vue</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="vue的组件间通信方法总结"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><center>总结一下vue的组件间通信方式和具体用法，不断补充...</center>

<ol>
<li><p>props:用于父子组件通信（向子组件中传递数据）</p>
</li>
<li><p>自定义事件：$on,$emit 可以实现子给父通信（向父组件中传递数据）</p>
</li>
<li><p>全局事件总线：$bus 全能</p>
</li>
<li><p>插槽：父到子</p>
</li>
<li><p>vuex：全能</p>
<hr>
<blockquote>
<h2 id="props"><a href="#props" class="headerlink" title="props"></a>props</h2><p>三种使用方式：</p>
<p>1.子组件中简单接收   2.子组件中仅限制接收数据类型  3.子组件中限制接收数据类型、是否必须、默认值</p>
<p><strong>注意：</strong>props是只读的(也就是说传过来的值无法利用methods里面的方法改变   模板结构内的插值语法的简单运算不算+-*&#x2F;)，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。</p>
<p>需求：A组件为student组件的父组件，然后在A组件中使用了student组件，并且需要给其传值。</p>
</blockquote>
</li>
</ol>
<p><strong>1.子组件中简单接收：</strong></p>
<p>A组件：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        //name=&quot;张三&quot;传递的值就是为张三，:age=&#x27;18&#x27;将这个作为表达式处理[如果在student组件中需要age++这样就可以直接运算]</span><br><span class="line">        &lt;Student name=&quot;张三&quot; :age=&#x27;18&#x27;&gt;&lt;/Student&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<p>Student组件：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &lt;h1&gt;name:&#123;&#123;name&#125;&#125;&lt;/h1&gt;</span><br><span class="line">        &lt;h1&gt;age:&#123;&#123;age++&#125;&#125;&lt;/h1&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">        name:Student,</span><br><span class="line">        //这里要跟A组件中写在标签上的(属性名)一样</span><br><span class="line">        props:[&#x27;name&#x27;,&#x27;age&#x27;]</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>2.子组件中仅限制接收数据类型：</strong></p>
<p>A组件中一样，Student组件：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &lt;h1&gt;name:&#123;&#123;name&#125;&#125;&lt;/h1&gt;</span><br><span class="line">        &lt;h1&gt;age:&#123;&#123;age++&#125;&#125;&lt;/h1&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">        name:Student,</span><br><span class="line">        //这里要跟A组件中写在标签上的(属性名)一样</span><br><span class="line">        props:&#123;name:String,age:number&#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>3.子组件中限制接收数据类型、是否必须、默认值:</strong></p>
<p>Stuednt组件：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &lt;h1&gt;name:&#123;&#123;name&#125;&#125;&lt;/h1&gt;</span><br><span class="line">        &lt;h1&gt;age:&#123;&#123;age++&#125;&#125;&lt;/h1&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">        name:Student,</span><br><span class="line">        //这里要跟A组件中写在标签上的(属性名)一样</span><br><span class="line">        props:&#123;</span><br><span class="line">            name:&#123;</span><br><span class="line">                type:String, //类型</span><br><span class="line">                required:true, //必要性</span><br><span class="line">                default:&#x27;老王&#x27; //默认值</span><br><span class="line">            &#125;,</span><br><span class="line">            age:&#123;</span><br><span class="line">                type:number, //类型</span><br><span class="line">                required:true, //必要性</span><br><span class="line">                default:18 //默认值</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<blockquote>
<h2 id="自定义事件："><a href="#自定义事件：" class="headerlink" title="自定义事件："></a>自定义事件：</h2><p><strong>给父组件绑定事件（事件回调函数自然在父组件中），在子组件中触发事件并传参，这样父组件中不就收到数据了。</strong>😉</p>
<ol>
<li>在父组件中给子组件绑定事件（2种方式），并在methods中写出绑定的事件被触发后要回调的函数。</li>
<li>在子组件中去触发绑定的事件</li>
</ol>
</blockquote>
<p>父组件：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;!-- 第一种绑定方式： 跟普通绑定事件一样只不过事件名称需要自己去取名  v-on:事件名=&quot;事件被触发后要回调的函数&quot; (v-on)可以用@/:来替换--&gt;</span><br><span class="line">		&lt;Student v-on:demo=&quot;getData&quot;&gt;&lt;/Student&gt;</span><br><span class="line">        &lt;!-- 第二种绑定方式:在组件挂载完毕后使用this.$refs.student.$on(&#x27;事件名&#x27;,触发事件后要执行的回调函数)--&gt;</span><br><span class="line">		&lt;Student ref=&quot;student&quot;&gt;&lt;/Student&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">	import Student from &#x27;./components/Student&#x27;</span><br><span class="line">	export default &#123;</span><br><span class="line">		name:&#x27;App&#x27;,</span><br><span class="line">		components:&#123;Student&#125;,</span><br><span class="line">		methods: &#123;</span><br><span class="line">			// 甭管前面传递了多少个数据 拿第一个给name 其余的都整理成params数组的形式</span><br><span class="line">			getData(name,...params)&#123;</span><br><span class="line">				console.log(&#x27;App收到了学生名：&#x27;,name,params)</span><br><span class="line">				this.studentName = name</span><br><span class="line">			&#125;,</span><br><span class="line">            getData1:(name)&#123;</span><br><span class="line">            	console.log(name)</span><br><span class="line">        	&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		mounted() &#123;</span><br><span class="line">			this.$refs.student.$on(&#x27;demo1&#x27;,this.getData1) //绑定自定义事件，第一个参数是事件名 第二个参数是事件被触发时调用的函数</span><br><span class="line">			// this.$refs.student.$once(&#x27;demo1&#x27;,this.getData1) //绑定自定义事件（一次性）事件修饰符.once</span><br><span class="line">		&#125;,</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>子组件：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div class=&quot;student&quot;&gt;</span><br><span class="line">		&lt;button @click=&quot;sendStudentData&quot;&gt;传数据&lt;/button&gt;</span><br><span class="line">        &lt;button @click=&quot;unbind&quot;&gt;解绑自定义事件&lt;/button&gt;</span><br><span class="line">        &lt;button @click=&quot;death&quot;&gt;销毁&lt;/button&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">		name:&#x27;Student&#x27;,</span><br><span class="line">		methods: &#123;</span><br><span class="line">			sendStudentData()&#123;</span><br><span class="line">				//触发Student组件实例身上的demo/demo1事件$emit()方法</span><br><span class="line">				this.$emit(&#x27;demo&#x27;,&#x27;张三&#x27;,666,888,900)</span><br><span class="line">				//this.$emit(&#x27;demo1&#x27;,&#x27;张三&#x27;)</span><br><span class="line">			&#125;,</span><br><span class="line">			unbind()&#123;</span><br><span class="line">				this.$off(&#x27;demo&#x27;) //解绑一个自定义事件</span><br><span class="line">				//this.$off([&#x27;demo1&#x27;,&#x27;demo&#x27;]) //解绑多个自定义事件</span><br><span class="line">				//this.$off() //解绑所有的自定义事件</span><br><span class="line">			&#125;,</span><br><span class="line">			death()&#123;</span><br><span class="line">				this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong>通过<code>this.$refs.xxx.$on(&#39;事件名&#39;,回调)</code>绑定自定义事件时，回调<span style="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭头函数</span>，否则this指向会出问题！</p>
<hr>
<blockquote>
<h2 id="全局事件总线：2023-x2F-07-x2F-29"><a href="#全局事件总线：2023-x2F-07-x2F-29" class="headerlink" title="全局事件总线：2023&#x2F;07&#x2F;29"></a>全局事件总线：2023&#x2F;07&#x2F;29</h2><p>全局事件的本质就是使用自定义事件，感觉比较简单（理解了自定义事件之后）。</p>
<p>原本自定义事件是在当子组件在父组件中使用时，给子组件的标签上搞一个自定义事件，然后我们在父组件中编写出事件的回调函数，之后在子组件中去触发这个事件并传参来进行子-&gt;父的数据通信。</p>
<p>我们现在搞一个不属于任何组件的东西，并且它可以让任何组件都看到（好进行绑定事件，触发事件来进行通信，改变了原来自能子-&gt;那种方式）。它就叫全局事件总线。</p>
</blockquote>
<p><strong>理解</strong> ：设计<code>一个不属于任何组件</code>的东西 通过<code>自定义事件</code> 来帮我们实现任意组件间通信。当组件想要接收数据时在X上绑定自定义事件，编写事件回调函数。当组件想要传递数据是去触发X上的事件，可以携带参数。</p>
<p>下面来张网图说明一下：</p>
<p><img src="https://s2.loli.net/2023/07/29/Hgj5RD3GtYpXnQo.png" alt="962eee1b6dac431d8a13e443e47adf96.png"></p>
<p><strong>使用：</strong> </p>
<p>1.整出来一个既不属于任何组件但还可以让任何组件都可以看到的东西，还可以调用$on,$off,$emit。所以把它放在Vue的原型对象上</p>
<p>入口文件main.js中：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入Vue</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="comment">//引入App</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="comment">//关闭Vue的生产提示</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span></span><br><span class="line"><span class="comment">//创建vm</span></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">	<span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">	<span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">	<span class="title function_">beforeCreate</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">//安装全局事件总线</span></span><br><span class="line">		<span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$bus</span> = <span class="variable language_">this</span> </span><br><span class="line">	&#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>2.student组件想要给同级别的school组件进行通信发送数据，那么就在school中，在全局事件总线上利用this.$bus.$on()绑定一个事件并编写回调函数，在student组件中利用this.$bus.$emit()来触发自定义函数携带参数来进行传值通信。反之则相反。</p>
<p>school组件中:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;School&#x27;</span>,</span><br><span class="line">    <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&#x27;尚硅谷&#x27;</span>,</span><br><span class="line">        <span class="attr">address</span>:<span class="string">&#x27;北京&#x27;</span>,</span><br><span class="line">    	&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">    <span class="title function_">mounted</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">//绑定自定义函数</span></span><br><span class="line">        <span class="comment">//1.</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">$bus</span>.$on(<span class="string">&#x27;hello&#x27;</span>,<span class="function">(<span class="params">data</span>)=&gt;</span>&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是School组件，收到了数据&#x27;</span>,data)</span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">//2.也可以这样写,箭头函数跟普通函数</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">$bus</span>.$on(<span class="string">&#x27;hello&#x27;</span>,<span class="keyword">function</span>(<span class="params">data</span>)&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是School组件，收到了数据&#x27;</span>,data)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">        <span class="title function_">beforeDestroy</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="comment">//解绑一下自定义事件</span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">$bus</span>.$off(<span class="string">&#x27;hello&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>student组件中：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=<span class="string">&quot;sendStudentName&quot;</span>&gt;把学生名给<span class="title class_">School</span>组件&lt;/button&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="attr">name</span>:<span class="string">&#x27;Student&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">			<span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">				<span class="attr">name</span>:<span class="string">&#x27;张三&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">				<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">			&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="title function_">mounted</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">			<span class="comment">// console.log(&#x27;Student&#x27;,this.x)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="attr">methods</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">			<span class="title function_">sendStudentName</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                 <span class="comment">//触发刚刚在school中在全局事件总线上绑定的事件，并给事件的回调函数传值来进行通信</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">				<span class="variable language_">this</span>.<span class="property">$bus</span>.$emit(<span class="string">&#x27;hello&#x27;</span>,<span class="variable language_">this</span>.<span class="property">name</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">			&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<hr>
<blockquote>
<h2 id="插槽-2023-x2F-8-x2F-3"><a href="#插槽-2023-x2F-8-x2F-3" class="headerlink" title="插槽 	2023&#x2F;8&#x2F;3"></a>插槽 	2023&#x2F;8&#x2F;3</h2><p>让<strong>父组件可以向子组件指定位置插入html结构</strong>，也是一种组件间通信的方式，适用于 <strong>父组件 &#x3D;&#x3D;&#x3D;&gt; 子组件</strong> 。分为三种不同的类型：默认插槽、具名插槽、作用域插槽。使用：子组件中合适的位置定义插槽【通过<code>&lt;slot&gt;</code>标签来表示，通过此标签来起到占位的作用，而要插入的内容也会对应到标签所在的位置。】 去替代父组件中子组件标签内的标签体内容。</p>
<p>我们平常在父组件中通过impor引入子组件使用的时候都仅仅是在</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">自定义组件名</span>&gt;</span><span class="tag">&lt;/<span class="name">自定义组件名</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>这样使用，自定义组件中间是不会写任何东西的，即便写了也会丢失不显示。非要写而且还不能让它丢失这时候就要用到插槽了</p>
</blockquote>
<p><strong>1.默认插槽:【B为A的父组件】</strong></p>
<p>B中：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;StudyM title=&quot;游戏列表&quot;&gt;</span><br><span class="line">      &lt;!--ul内就是我想在子组件内显示的内容，但是这个内容并不是在子组件内定好的，而是由使用者自主决定--&gt;  </span><br><span class="line">      &lt;ul&gt;</span><br><span class="line">        &lt;li v-for=&quot;game , index in games&quot; :key=&quot;index&quot;&gt;&#123;&#123;game&#125;&#125;&lt;/li&gt;</span><br><span class="line">      &lt;/ul&gt;</span><br><span class="line">    &lt;/StudyM&gt;</span><br><span class="line">    &lt;StudyM title=&quot;推荐音乐&quot;&gt;</span><br><span class="line">      &lt;ul&gt;</span><br><span class="line">        &lt;li v-for=&quot;music , index in musics&quot; :key=&quot;index&quot;&gt;&#123;&#123;music&#125;&#125;&lt;/li&gt;</span><br><span class="line">      &lt;/ul&gt;</span><br><span class="line">    &lt;/StudyM&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  //引入组件</span><br><span class="line">  import StudyM from &#x27;./components/StudyM.vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    StudyM</span><br><span class="line">  &#125;,</span><br><span class="line">  data()&#123;</span><br><span class="line">    return&#123;</span><br><span class="line">      games:[&#x27;英雄联盟&#x27;, &#x27;炉石传说&#x27;, &#x27;穿越火线&#x27;, &#x27;QQ飞车&#x27;, &#x27;吃鸡&#x27;],</span><br><span class="line">      musics:[&#x27;迷途羔羊&#x27;, &#x27;红玫瑰&#x27;, &#x27;富士山下&#x27;, &#x27;麻雀&#x27;, &#x27;妈妈的话&#x27;, &#x27;故乡&#x27;],</span><br><span class="line">      movies:[&#x27;蜘蛛侠&#x27;, &#x27;复仇者联盟&#x27;, &#x27;金刚狼&#x27;, &#x27;触不可及&#x27;, &#x27;唐人街探案&#x27;,&#x27;当幸福来敲门&#x27;]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>A中：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;box&quot;&gt;</span><br><span class="line">    &lt;h4&gt;&#123;&#123;title&#125;&#125;&lt;/h4&gt;</span><br><span class="line">    &lt;slot&gt;如果在父组件中的子组件标签内没有写任何东西的话，这句话将显示出来&lt;/slot&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">    name:&#x27;StudyM&#x27;,</span><br><span class="line">    //用到了之前的props传值的基本形式</span><br><span class="line">    props:[&#x27;title&#x27;],</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>2.具名插槽：给插槽取个名字，当插入元素的时候说明要插入的是哪个插槽</strong></p>
<p>需求：A组件中有2个插槽，只想替换第一个插槽，另外那个默认即可</p>
<p>B中：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;!-- 默认插值 --&gt;</span><br><span class="line">    &lt;StudyM title=&quot;游戏列表&quot;&gt;</span><br><span class="line">      &lt;!-- 首先在要插入html的部分需要用一个&lt;template&gt;标签包裹住各个部分，然后给&lt;template&gt;标签绑定slot=“name” 属性，最后在子组件中对应每个&lt;template&gt; 给出一个&lt;slot&gt; 并且添加上name属性，name属性的值与父组件中template标签绑定的slot属性的属性值一样--&gt;</span><br><span class="line">      &lt;!-- 具名插槽的写法一 --&gt;</span><br><span class="line">      &lt;template slot=&quot;one&quot;&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &lt;li v-for=&quot;game , index in games&quot; :key=&quot;index&quot;&gt;&#123;&#123;game&#125;&#125;&lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">      &lt;/template&gt;</span><br><span class="line">      &lt;!-- 具名插槽的写法二 --&gt;</span><br><span class="line">      &lt;template v-slot:tow&gt;</span><br><span class="line">        </span><br><span class="line">      &lt;/template&gt;</span><br><span class="line">    &lt;/StudyM&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  //引入组件</span><br><span class="line">  import StudyM from &#x27;./components/StudyM.vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    StudyM</span><br><span class="line">  &#125;,</span><br><span class="line">  data()&#123;</span><br><span class="line">    return&#123;</span><br><span class="line">      games:[&#x27;英雄联盟&#x27;, &#x27;炉石传说&#x27;, &#x27;穿越火线&#x27;, &#x27;QQ飞车&#x27;, &#x27;吃鸡&#x27;]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">#app&#123;</span><br><span class="line">  display: inline-flex;</span><br><span class="line">  justify-content: center;</span><br><span class="line">&#125;</span><br><span class="line">video&#123;</span><br><span class="line">  width: 100%;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>A中：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;box&quot;&gt;</span><br><span class="line">    &lt;h4&gt;&#123;&#123;title&#125;&#125;&lt;/h4&gt;</span><br><span class="line">    &lt;slot name=&quot;one&quot;&gt;&lt;/slot&gt;</span><br><span class="line">    &lt;slot name=&quot;tow&quot;&gt;这些文字将出现在slot属性值为two的位置&lt;/slot&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">    name:&#x27;StudyM&#x27;,</span><br><span class="line">    props:[&#x27;title&#x27;],</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>3.作用域插槽：</strong></p>
<p>数据不在父组件身上，而是在子组件身上【通过数据的动态绑定v-bind来动态传参】，且组件的结构和内容由父组件决定【在template标签上使用scope&#x3D;“xxx”来进行接收】。作用域组件限定了组件内结构和数据的展示范围，以便在开发中我们可以根据一个组件而不断变换其中的内容和结构。比如说在子组件A中有一个movie数组，我在父组件B中拿到这个数组后既可以使用列表来渲染出来也可以使用h2标题来渲染出来。</p>
<p>B中：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;!-- 默认插值 --&gt;</span><br><span class="line">    &lt;StudyM title=&quot;电影列表&quot;&gt;</span><br><span class="line">      &lt;template scope=&quot;one&quot;&gt;</span><br><span class="line">        &lt;!-- 第一种结构 --&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &lt;li v-for=&quot;m,index in one.movies&quot; :key=&quot;index&quot;&gt;&#123;&#123;m&#125;&#125;&lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">      &lt;/template&gt;</span><br><span class="line">    &lt;/StudyM&gt;</span><br><span class="line">    &lt;StudyM title=&quot;电影列表&quot;&gt;</span><br><span class="line">      &lt;template scope=&quot;one&quot;&gt;</span><br><span class="line">        &lt;!-- 第三种结构 --&gt;</span><br><span class="line">          &lt;h4 v-for=&quot;m,index in one.movies&quot; :key=&quot;index&quot;&gt;&#123;&#123;m&#125;&#125;&lt;/h4&gt;</span><br><span class="line">      &lt;/template&gt;</span><br><span class="line">    &lt;/StudyM&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  //引入组件</span><br><span class="line">  import StudyM from &#x27;./components/StudyM.vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    StudyM</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>A中：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;box&quot;&gt;</span><br><span class="line">    &lt;h4&gt;&#123;&#123;title&#125;&#125;&lt;/h4&gt;</span><br><span class="line">    &lt;!-- 把数据传给插入的html部分 --&gt;</span><br><span class="line">    &lt;slot :movies=&quot;movies&quot;&gt;&lt;/slot&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">    name:&#x27;StudyM&#x27;,</span><br><span class="line">    props:[&#x27;title&#x27;],</span><br><span class="line">    data()&#123;</span><br><span class="line">      return&#123;</span><br><span class="line">        movies:[&#x27;蜘蛛侠&#x27;, &#x27;复仇者联盟&#x27;, &#x27;金刚狼&#x27;, &#x27;触不可及&#x27;, &#x27;唐人街探案&#x27;,&#x27;当幸福来敲门&#x27;]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h2 id="vuex部分到时候忘记的话去参考之前写的记录"><a href="#vuex部分到时候忘记的话去参考之前写的记录" class="headerlink" title="vuex部分到时候忘记的话去参考之前写的记录"></a>vuex部分到时候忘记的话去参考之前写的记录</h2></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="树洞">计算机学士&amp;化工硕士</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://baozi0625.gitee.io/tree-cave/2023/07/20/vue%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/">https://baozi0625.gitee.io/tree-cave/2023/07/20/vue%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://baozi0625.gitee.io/tree-cave" target="_blank">树洞</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tree-cave/tags/vue-%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1/">vue-组件间通信</a></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/tree-cave/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src="/tree-cave/img/wechat.jpg" alt="wechat"/></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="/tree-cave/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="/tree-cave/img/alipay.jpg" alt="alipay"/></a><div class="post-qr-code-desc">alipay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/tree-cave/2023/07/28/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%8A%A5%E9%94%99/" title="微信小程序导入别人的项目，打开之后出现Resource has expired. Please renewal fee, but if theproblem cannot be solved, contact us .的错误"><img class="cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="onerror=null;src='/tree-cave/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">微信小程序导入别人的项目，打开之后出现Resource has expired. Please renewal fee, but if theproblem cannot be solved, contact us .的错误</div></div></a></div><div class="next-post pull-right"><a href="/tree-cave/2023/07/19/gitte%E8%BF%9B%E8%A1%8C%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA%E4%BB%A5%E5%8F%8A%E5%88%9D%E5%A7%8B%E5%8C%96/" title="用git来创建vue项目以及初始化项目的过程"><img class="cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="onerror=null;src='/tree-cave/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">用git来创建vue项目以及初始化项目的过程</div></div></a></div></nav><hr class="custom-hr"/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://s2.loli.net/2023/06/20/PkXRYIvxGBrtHZA.png" onerror="this.onerror=null;this.src='/tree-cave/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">计算机学士&amp;化工硕士</div><div class="author-info__description">一个对全栈开发感兴趣的化工硕士</div></div><div class="card-info-data site-data is-center"><a href="/tree-cave/archives/"><div class="headline">文章</div><div class="length-num">14</div></a><a href="/tree-cave/tags/"><div class="headline">标签</div><div class="length-num">11</div></a><a href="/tree-cave/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/baozi0625"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">保持热爱</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#props"><span class="toc-text">props</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%EF%BC%9A"><span class="toc-text">自定义事件：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%EF%BC%9A2023-x2F-07-x2F-29"><span class="toc-text">全局事件总线：2023&#x2F;07&#x2F;29</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E6%A7%BD-2023-x2F-8-x2F-3"><span class="toc-text">插槽 	2023&#x2F;8&#x2F;3</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vuex%E9%83%A8%E5%88%86%E5%88%B0%E6%97%B6%E5%80%99%E5%BF%98%E8%AE%B0%E7%9A%84%E8%AF%9D%E5%8E%BB%E5%8F%82%E8%80%83%E4%B9%8B%E5%89%8D%E5%86%99%E7%9A%84%E8%AE%B0%E5%BD%95"><span class="toc-text">vuex部分到时候忘记的话去参考之前写的记录</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/tree-cave/2023/08/13/Vue%E8%B7%AF%E7%94%B1/" title="vue路由"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/tree-cave/img/404.jpg'" alt="vue路由"/></a><div class="content"><a class="title" href="/tree-cave/2023/08/13/Vue%E8%B7%AF%E7%94%B1/" title="vue路由">vue路由</a><time datetime="2023-08-12T16:00:00.000Z" title="发表于 2023-08-13 00:00:00">2023-08-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tree-cave/2023/08/13/%E5%8C%96%E5%B7%A5%E5%8E%9F%E7%90%86/" title="化工原理中个人觉得需要记录的点"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/tree-cave/img/404.jpg'" alt="化工原理中个人觉得需要记录的点"/></a><div class="content"><a class="title" href="/tree-cave/2023/08/13/%E5%8C%96%E5%B7%A5%E5%8E%9F%E7%90%86/" title="化工原理中个人觉得需要记录的点">化工原理中个人觉得需要记录的点</a><time datetime="2023-08-12T16:00:00.000Z" title="发表于 2023-08-13 00:00:00">2023-08-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tree-cave/2023/08/10/%E5%9B%9E%E9%A1%BE%E9%81%97%E5%BF%98%E7%9F%A5%E8%AF%86%E7%82%B9/" title="回顾遗忘的高中化学知识点"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/tree-cave/img/404.jpg'" alt="回顾遗忘的高中化学知识点"/></a><div class="content"><a class="title" href="/tree-cave/2023/08/10/%E5%9B%9E%E9%A1%BE%E9%81%97%E5%BF%98%E7%9F%A5%E8%AF%86%E7%82%B9/" title="回顾遗忘的高中化学知识点">回顾遗忘的高中化学知识点</a><time datetime="2023-08-09T16:00:00.000Z" title="发表于 2023-08-10 00:00:00">2023-08-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tree-cave/2023/08/10/%E8%AE%BA%E6%96%87%E4%B8%AD%E7%9A%84%E5%90%8D%E8%AF%8D/" title="论文中一些词语的解释"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/tree-cave/img/404.jpg'" alt="论文中一些词语的解释"/></a><div class="content"><a class="title" href="/tree-cave/2023/08/10/%E8%AE%BA%E6%96%87%E4%B8%AD%E7%9A%84%E5%90%8D%E8%AF%8D/" title="论文中一些词语的解释">论文中一些词语的解释</a><time datetime="2023-08-09T16:00:00.000Z" title="发表于 2023-08-10 00:00:00">2023-08-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tree-cave/2023/08/07/nodeJs/" title="node.js的学习"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/tree-cave/img/404.jpg'" alt="node.js的学习"/></a><div class="content"><a class="title" href="/tree-cave/2023/08/07/nodeJs/" title="node.js的学习">node.js的学习</a><time datetime="2023-08-06T16:00:00.000Z" title="发表于 2023-08-07 00:00:00">2023-08-07</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 计算机学士&化工硕士</div><div class="footer_custom_text">Hi, welcome to my blog!</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/tree-cave/js/utils.js"></script><script src="/tree-cave/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: 'l2iOGjxd8RLOsFZB2qG06CR1-gzGzoHsz',
      appKey: 'zl7gOCvEvrsrf3SNBcrJvDrj',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/tree-cave/js/search/local-search.js"></script></div></div></body></html>